<template>
    <div class="hello">
        <div class="frame">
             <!-- 标题 -->
            <div class="flexal" style="padding-top: 15px;margin-bottom: 10px;">
                <template  v-for="(item,index) in titleList">
                <div class="flexcumal" :key="index" :style="{'margin-left':index ==1? '39px':'0px'}" @click="titleIndex = index">
                <div class="people-title">{{item}}</div>
                <div class="frame-line" v-if="index == titleIndex"></div>
                <div class="frame-line" v-else style="background: #fff;"></div>
                </div>
                </template>
            </div>
            <template v-for="(item,index) in tab">
            <div class="frame-item flexal" :class="index == tabIndex? 'frame-item-active': ''" :key="index" @click="submit(index)">
                <!-- <img :src="index == tabIndex ? item.chooseIcon:item.icon"   style="width: 16px;height: 16px;margin-left: 12px;margin-right: 6px;"  /> -->
                 <div class="frame-tab-line" v-if="index == 0"></div>
                 <div class="frame-tab-line" style="background: #FF9800;" v-if="index == 1"></div>
                 <div class="frame-tab-line" style="background: #1591F0;" v-if="index == 2"></div>
                 <div class="frame-tab-line" style="background: #7832E2;" v-if="index == 3"></div>
                <div class="frame-item-text" style="margin-left: 19px;">{{item.text}}</div>
            </div>
            </template>
        </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'workNotcie',
    props: {
      msg: {
        type:String,
        default:''
      }
    },
    data(){
        return{
            input:'',
            titleList:['工作日志','查看日志'],
            titleIndex:0,
            tab:[
                {
                    icon:require('@/assets/img/workbench/stay.png'),
                    chooseIcon:require('@/assets/img/workbench/stayIcon.png'),
                    text:'日报'
                },
                {
                    icon:require('@/assets/img/workbench/end.png'),
                    chooseIcon:require('@/assets/img/workbench/endIcon.png'),
                    text:'周报'
                },
                {
                    icon:require('@/assets/img/workbench/start.png'),
                    chooseIcon:require('@/assets/img/workbench/startIcon.png'),
                    text:'月报'
                },
                {
                    icon:require('@/assets/img/workbench/start.png'),
                    chooseIcon:require('@/assets/img/workbench/startIcon.png'),
                    text:'自由汇报'
                },
            ],
            tabIndex:0
        }
    },
    methods:{
        submit(index){
            this.tabIndex = index
            this.$emit('workNoticeSubmit',index)
        }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">
    .frame{
        margin-top: 31px;
        width: 313px;
        height: 973px;
        background: #FFFFFF;
        border-radius: 16px 16px 16px 16px;

        .people-title{
        margin-left: 12px;
        font-size: 18px;
        font-weight: 500;
        color: #777777;
        }
        .people-title-active{

        }
        
        .left-item{
        margin-left: 12px;
        margin-top: 5px;
        display: flex;
        width: 185px;
        align-items: center;
      
      .prefix-icon3{
        margin-left: 5px;
        width: 15px;
        height: 15px;
        background-image: url('../../assets/img/navigation/search.png');
        background-size: cover; /* 确保图像覆盖整个背景区域 */
        background-position: center; /* 图像居中对齐 */
        background-repeat: no-repeat; /* 防止图像重复 */
      }
      .el-input__inner{
        height: 36px;
        background: #D4DFEA;
        font-size: 15px;
        border-radius: 8px;
        border: 1px solid #C4C6CD;
        color: #272B34;
      }
      .item-text{
        margin-left: 12px;
        color: #858A99;
        font-size: 16px;
        font-weight: 400;
        flex: 1;
      }
      .item-bubble{
        width: 15px;
        height: 15px;
        background: #F65160;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        color: #FFFFFF;
        font-weight: 400;
      }
    }
    .frame-item{
        margin-top: 12px;
        margin-left: 12px;
        width: 290px;
        height: 63px;
        background: #FFFFFF;
        color: #272B34;
        border-radius: 8px 8px 8px 8px;
        box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.16);
    }
    .frame-item-active{
        // background: #EFF2FF;
        // color: #0052D9;
    }
    .frame-item-text{
        font-size: 15px;
        
        font-weight: 400;
    }
    .frame-line{
        width: 26px;
        height: 3px;
        background: #0052D9;
        border-radius: 3px 3px 3px 3px;
    }
    .frame-tab-line{
        width: 5px;
        height: 63px;
        background: #4CAF50;
        border-radius: 8px 0px 0px 8px;
    }
    }
    .imgIcon{
      width: 19px;
      height: 19px;
    }
  </style>
  